<template>
	<view class="index-details" ref="uv-back-top">
		<headers v-if="isPc" @custom-event="e=>state = e"></headers>
		<uv-navbar v-if="!isPc" title="详情" rightText="" @leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<!-- <uv-text :text="data[0].name"></uv-text> -->
		<view class="contents" v-if="list">
			<view class="details-content">
				<view class="middle-reht">
					<rich-text :nodes="list.content"></rich-text>
					<uv-text style="opacity: 0;" lines="1" :text="fill"></uv-text>
				</view>
				<view class="middle-dhrds">
					<view class="middle-fjtf">
						<uv-image shape="circle" :src="list.author.portrait" width="80" height="80">
							<template v-slot:loading>
								<uv-loading-icon color="red"></uv-loading-icon>
							</template>
						</uv-image>
						<view style="margin-left:10px;">
							<uv-text text=""></uv-text>
							<uv-text style="font-size: 15px;margin-top: 5ox;" customStyle="font-size: 20px;"
								:text="list.author.nickname"></uv-text>
							<uv-text :text="list.author.blurb?list.author.blurb:'此人太懒了'"
								customStyle="color:#A1A1A1;"></uv-text>
							<uv-text style="opacity: 0;" lines="1" :text="fill"></uv-text>
						</view>
					</view>
					<view class="middle-sgsg">
						<uv-button @click="routed('/pages/'+list.type+'/index?id='+list._id)" type="primary"
							text="一键同款"></uv-button>
						<uv-button :plain="list.like=='1'?true:false" :icon="list.like=='1'?'heart-fill':'heart'"
							type="primary" text="收藏" @click="heartlike(list)"></uv-button>
						<uv-button @click="likeNew" plain icon="thumb-up" type="primary" text="点赞"></uv-button>
						<uv-button @click="clickNews" plain icon="thumb-up" type="primary" text="新建"></uv-button>
					</view>
					<view class="middle-sgsg">
						<uv-icon labelSize="12" :label="list.likes.length" size="15" name="heart"></uv-icon>
						<uv-icon labelSize="12" :label="list.likes.length" size="15" name="heart"></uv-icon>
						<uv-icon labelSize="12" :label="list.likes.length" size="15" name="thumb-up"></uv-icon>
					</view>
					<view v-if="list.title"
						style="display: flex;justify-content: space-between;margin-top: 5px;border-radius: 5px;padding: 5px 10px ;border:1px solid #cccccc">
						<uv-text size="15" bold :text="list.title"></uv-text>
					</view>
					<view style="display: flex;justify-content: space-between;margin-top: 5px;">
						<rich-text @click="copyCode" style="font-size: 15px;" :nodes="replaced(prompt)"
							@tap="copyCode"></rich-text>
					</view>
					<el-descriptions style="margin-top: 10px;" title="" :column="2" size="small" border>
						<el-descriptions-item v-if="env === 'development'" label="开发用" :span="2">
							{{list[0]}}
						</el-descriptions-item>
					</el-descriptions>
				</view>
			</view>
		</view>
		<uv-toast ref="toast"></uv-toast>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		<tabbars :prop-value="'mapping'"></tabbars>
	</view>
</template>

<script>
	// 引入
	import contents from '@/components/content/content';
	import headers from '@/components/header/header.vue';
	import tabbars from '@/components/tabbar/tabbar.vue';
	import config from '@/common/config'
	import {
		newsId,
		news,
		likeNews,
		like
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			tabbars,
			contents,
			headers
		},
		data() {
			return {
				fill: config.fill,
				env: config.env,
				scrollTop: 0,
				value: 'qeqwarawrf',

				tooltip: '图片、视频、音乐等在有效期限制，请尽快下载',
				adjustColumn: null,
				show: true,
				state: '',
				userinfo: {},
				tabbarsValue: '',
				dialogueColor: '#F4F5F9',
				list: [],

				prompt: '',
				param: '',
			}
		},
		mounted() {
			this.adjustColumnCount();
		},
		created() {
			uni.onWindowResize((res) => {
				this.adjustColumnCount();
			});
		},
		onLoad(ee) {
			if (ee && ee.id) {
				this.ress(ee.id);
			}
		},
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;
		// 	// #ifdef APP-NVUE
		// 	this.scrollTop = e.detail.scrollTop;
		// 	// #endif
		// },
		methods: {
			async clickNews() {
				await news({
					title: '22224',
					content: '<p><strong>121321</strong></p><p>dswknv ik</p><p>2025/4/9</p><p><img src="blob:https://hellouniapp.dcloud.net.cn/039931e4-205e-4e0c-9c27-f058a133f596" data-local="blob:https://hellouniapp.dcloud.net.cn/039931e4-205e-4e0c-9c27-f058a133f596" alt="图像"></p><p>wqewqweqznioaw </p>',
				}, {
					custom: {
						auth: true,
						toast: true,
					},
				}).then(e => {
					this.$refs.toast.show({
						message: e != 1 ? '收藏成功' : '取消收藏',
					});
					a.like = e != 1 ? (a.like + 1) : (a.like - 1);
				}).catch(e => {
					console.log(e);
				})
			},
			resmode(e) {
				var modes = {
					"turbo": ["最快", '生成速度'],
					"fast": ["快速", '生成速度'],
					"relax": ["一般", '生成速度'],
				};
				if (modes.hasOwnProperty(e)) {
					return modes[e];
				} else {
					return [e, '模型'];
				}
			},
			titlePrompt(e) {
				if (e.title) {
					return e.title;
				} else {
					if (e.content[0].userPrompt && e.content[0].videoUrl) {
						return e.content[0].userPrompt;
					}
					if (e.content[0].prompt && e.content[0].action) {
						return e.content[0].prompt;
					}
					if (e.content[0].prompt && e.content[0].mode) {
						return e.content[0].prompt;
					}
					if (e.content[0].revised_prompt && e.content[0].url) {
						return e.content[0].revised_prompt;
					}
					if (e.content[0]?.data && e.content[0].data[0]) {
						return e.content[0].data[0].revised_prompt
					}
				}
			},
			typed(e) {
				if (e == 'painting') {
					return '图片';
				} else if (e == 'video') {
					return '视频';
				} else if (e == "music") {
					return '音乐';
				} else {
					return '未知'
				}
			},
			// 点赞/取消点赞
			async heartlike(comment) {
				try {
					// 先更新UI状态
					comment.likeStatus = !comment.likeStatus;
					comment.likes = comment.likeStatus ? comment.likes + 1 : Math.max(0, comment.likes - 1);
			
					// 发送请求到后端
					await like({
						id: comment._id
					}, {
						custom: {
							auth: true,
							toast: true
						}
					})
				} catch (e) {
					// 失败则回退状态
					comment.likeStatus = !comment.likeStatus;
					comment.likes = comment.likeStatus ? comment.likes + 1 : Math.max(0, comment.likes - 1);
			
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},
			async likeNew(a) {
				await likeNews({
					id: a._id
				}, {
					custom: {
						auth: true,
						toast: true,
					},
				}).then(e => {
					this.$refs.toast.show({
						message: e != 1 ? '收藏成功' : '取消收藏',
					});
					a.like = e != 1 ? (a.like + 1) : (a.like - 1);
				}).catch(e => {
					console.log(e);
				})
			},
			analysis() {
				var e = this.list[0]
				if (!e) return;
				this.prompt = ((e.data && e.data[0].revised_prompt) || e.content || e.text || e
					.revised_prompt || e.prompt || e.userPrompt || (e.musics && e.musics[0].title));
				// console.log(this.prompt);

				// const array = this.prompt.split(' ');
				// const msgs = e.prompt && e.prompt.split(' --ar');
				// // this.msg = msgs[0];
				// // this.parm = msgs[1];
				// if (msgs && msgs[1]) {
				// 	console.log('--ar' + msgs[1])
				// 	const sadsa = ('ar' + msgs[1]).split(' --');
				// 	console.log(sadsa)
				// }

				// // this.ss = this.imagine.prompt.split(' --');
				// this.ss = ('--ar' + msgs[1]).split(' ');
				// console.log(this.parm);
				// console.log(this.ss);
			},
			adjustColumnCount() {
				var that = this;
				const query = uni.createSelectorQuery().in(this);
				query.select('.middle-reht').boundingClientRect(data => {
					if (data) {
						if (!that.adjustColumn || that.adjustColumn.width != data.width) {
							if (data.width > 500) {
								data.width = 499;
							}
							that.adjustColumn = data;
						}
						// middle-reht details-content
					}
				}).exec();
			},
			imageUrl(e) {
				return e.url || e.imageUrl || '';
			},
			imageEndUrl(e) {
				return e.imageEndUrl;
			},
			videoUrl(e) {
				if (e.videoUrl) {
					return [{
						url: e.videoUrl
					}];
				} else {
					return [];
				}
			},
			replaced(text) {
				if (!text) return;
				text =
					'<pre class="text-block"><div class="copy-text cursor-pointer"><span style="font-weight: bold;font-size: 14px;color:#ababab">正向提示词</span>复制</div><div class="content-text">' +
					text;
				// text =
				// 	'<pre class="code-block"><div class="copy-text"><span style="font-weight: bold;font-size: 14px;color:#ababab">正向提示词</span>复制</div><div class="content-text">' +
				// 	text;
				if (typeof text !== 'string') {
					text = text[0].text
				}
				const msgs = text.split(' --');
				if (msgs) {
					text = msgs[0];
				}
				text = text.replace(/(```[\s\S]*?```)/g, '<pre class="code-block">$1</pre>');
				text = text.replace(/(```\b\w+\b)/g,
					'<div class="copy-text"><span style="font-weight: bold;font-size: 15px;color:#ababab">$1</span>复制</div>'
				);
				text = text.replace(/```/g, '');
				text = text.replace(/(###[\s\S]*?\\n)/g,
					'<span style="font-weight: bold;color:#00000">$1</span>'
				);
				text = text.replace(/(###[\s\S]*?\n)/g,
					'<span style="font-weight: bold;color:#00000">$1</span>'
				);
				text = text.replace(/###/g, '');
				text = text.replace(/\\n/g, "<br>");
				text = text.replace(/\n/g, "<br>");
				text = text.replace(/<article[^>]*>/g, '<p>').replace(/<section[^>]*>/g, '<p>');
				// text && text.replace(/(\s{2,})(?![^<>]*>)/g, function(
				// 	match) {
				// 	return match.replace(/ /g, '&nbsp;');
				// });
				// text = text + '</div></pre>';
				text = text + '</div></div></pre>';
				return text;
			},
			copyCode(text) {
				var that = this;
				const target = event.target;
				const classList = target.classList;
				if (classList && classList.contains('copy-text')) {
					const clas = target.parentNode;
					let first = {};
					if (clas.firstChild) {
						first = clas.firstChild;
						clas.removeChild(clas.firstChild);
					}
					let text = clas.innerText;
					if (first) {
						clas.prepend(first);
					}
					// const text = target.getAttribute('data-text');
					// console.log(text);
					that.copy(text);
				}
			},
			copy(text) {
				var that = this;
				if (typeof text !== 'string') {
					text = text[0].text
				}
				text = text.replace(/```/g, '');
				text = text.replace(/###/g, '');
				uni.setClipboardData({
					data: text,
					success: function() {
						that.$refs.toast.show({
							message: "复制成功"
						})
					},
					complete: function() {
						uni.hideToast();
					}
				});
			},
			ress(a) {
				newsId(a, {
					custom: {
						auth: true,
						toast: false,
					}
				}).then(e => {
					console.log(e);
					this.list = e;
					this.userinfo = e.userinfo;
				})
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			cTime(time1, e, index) {
				if (index == 0) {
					return true;
				}
				// console.log(" ” " + Number(e.length - 1));
				if (index == Number(e.length - 1)) {
					return false;
				}
				var time2 = e[index + 1] && e[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				// console.log(time1 + " 《=》 " + time2);
				// 将时间转换为Date对象
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				// 计算时间差（毫秒）
				var difference = Math.abs(date2 - date1);
				// 将时间差转换为分钟
				var minutes = Math.ceil(difference / (1000 * 60)); // 向上取整
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			routed(url) {
				console.log(url);
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						uni.hideLoading();
						next(true);
						// // 模拟处理等待
						// setTimeout(() => {

						// }, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index-details {
		-webkit-user-select: text;
		/* Safari */
		-moz-user-select: text;
		/* Firefox */
		-ms-user-select: text;
		/* IE 10+ */
		user-select: text;

		/* 加载前 */
		::v-deep .el-image__placeholder {
			min-width: 120px;
			min-height: 120px;
			background: url('@/static/loading.gif') no-repeat 50% 50% !important;
			background-size: 50% !important;
		}

		/* Standard syntax */
		.contents {
			display: flex;
			justify-content: center;
			align-items: center;

			::v-deep .code-block {
				background-color: #f8f8f8;
				border: 1px solid #ddd;
				border-radius: 10px;
				overflow: hidden;
				margin-bottom: 10px;
				white-space: pre-wrap;
				word-break: break-all;
				font-family: 'Courier New', Courier, monospace;
				font-size: 14px;
			}

			::v-deep .text-block {
				background-color: #f8f8f8;
				border: 1px solid #ddd;
				border-radius: 10px;
				// padding: 10px 5px;
				overflow: hidden;
				margin-bottom: 10px;
				white-space: pre-wrap;
				word-break: break-all;
			}

			::v-deep .copy-text {
				padding: 8px 10px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 5px;
				background-color: #E5E7ED;
			}

			::v-deep .content-text {
				padding: 0px 10px 10px;
			}

			::v-deep .copy-text:hover {
				color: #409EFF;
			}

			.details-content {
				display: flex;
				justify-content: space-between;
				align-items: self-start;
				flex-wrap: wrap;
				padding: 10px 0px;
				width: 1200px;

				.middle-reht {
					max-width: 680px;
					margin: 0px 5px;
				}

				.middle-dhrds {
					max-width: 500px;
					margin: 0px 5px;

					.middle-fjtf {
						background-color: rgb(244, 245, 249);
						border-radius: 10px;
						display: flex;
						justify-content: flex-start;
						max-width: 500px;
					}

					.middle-gfjdd {
						margin-top: 10px;
					}

					.middle-sgsg {
						margin-top: 10px;
						//	border: 1px solid #eeeeee;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

			}
		}
	}
</style>